<template>
  <div>
    <ElButton @click="go1">request body with json</ElButton>
    <ElButton @click="go2">request body with www-url</ElButton>
    <ElButton @click="go3">request url with www-url</ElButton>
    <ElButton @click="go4">request url with path</ElButton>
  </div>
  <ElButton type="primary" @click="search"> 搜索</ElButton>
  <div>{{ pageResults }}</div>
  <div>{{ searchForm }}</div>
  <ElTable :data="pageResults.records">
    <ElTableColumn prop="leaveStart" label="开始时间"></ElTableColumn>
    <ElTableColumn prop="leaveEnd" label="结束时间"></ElTableColumn>
    <ElTableColumn prop="billId" label="IDDDD"></ElTableColumn>
  </ElTable>
  <ElPagination :total="pageResults.total" :page-size="searchForm.pageSize"
   v-model:current-page="searchForm.pageNum" @current-change="search" ></ElPagination>
</template>

<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from
import axios from "axios";
import { defineComponent } from "vue";

export default defineComponent({
  name: "HttpNew",
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      yyyy: {
        name: "lisi002",
        age: 11,
      },
      searchForm: {
        pageNum: 1,
        pageSize: 3,
      },
      // records: [],
      // total: 0,
      pageResults: {
        records: [],
        total: 0,
      },
    };
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {},
  methods: {
    // sampleM() {},
    async go1() {
      await axios({
        method: "post",
        url: "http://localhost:8080/test10",
        data: this.yyyy,
      });
    },
    async go2() {
      await axios({
        method: "post",
        url: "http://localhost:8080/test11",
        data: this.yyyy,
        headers: {
          "content-type": "application/x-www-form-urlencoded",
        },
      });
    },
    async go3() {
      await axios({
        method: "get",
        url: "http://localhost:8080/test11",
        params: this.yyyy,
      });
    },

    async go4() {
      try {
        const res = await axios({
          method: "get",
          url: "http://localhost:8080/test12/" + this.yyyy.name,
        });
        console.log("axios request success", res);
      } catch (error) {
        console.log("axios request failed", error);
      }
    },
    go5() {
      axios({
        method: "get",
        url: "http://localhost:8080/test12/" + this.yyyy.name,
      }).then(
        (res) => {
          console.log("axios request success", res);
        },
        (error) => {
          console.log("axios request failed", error);
        }
      );
    },
    async search() {
      const response = await axios({
        method: "post",
        url: "http://localhost:8080/leaveBill/queryPage",
        data: this.searchForm,
      });
      // console.log(response);
      this.pageResults.records = response.data.records;
      this.pageResults.total = response.data.total;
    },
  },
  watch: {
    // sampleP(n, o) {},
  },
});
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
